<template>
  <com-page>
	  <u-navbar placeholder
	            leftIcon="arrow-left"
	            :title="$t('pages_user_order_order_msg_a7387278')"
	            autoBack />
    <com-tabs-swiper
      ref="tabs"
      :list="tabs"
      :current="tabIndex"
      @change="change"
      :is-scroll="false"
      swiperWidth="750"
    />
    <swiper
      class="swiper-box"
      :current="swiperCurrent"
      @transition="transition"
      @animationfinish="animationfinish"
      :style="{ height: `${systemInfo.windowHeight - 44 - systemInfo.statusBarHeight}px` }"
    >
      <swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
        <OrderItem :ref="`mescrollItem${index}`" :i="index" :index="tabIndex" top="44" :orderStatus="item.status" />
      </swiper-item>
    </swiper>
  </com-page>
</template>

<script>
import { mapState } from 'vuex'
import OrderItem from './components/order-item.vue'
export default {
  name: 'Order-List',
  components: {
    OrderItem,
  },
  computed: {
    ...mapState({
      systemInfo: (state) => state.app.systemInfo,
    }),
  },
  data() {
    return {
      tabs: [
        {
          name: this.$t('pages_user_order_components_order-item_msg_818d7858'),
          status: 0,
        },
        {
          name: this.$t('pages_user_order_components_order-item_msg_d8476e0a'),
          status: 1,
        },
        {
          name: this.$t('pages_user_order_components_order-item_msg_4933ca41'),
          status: 2,
        },
        {
          name: this.$t('pages_user_order_components_order-item_msg_a48b2863'),
          status: 3,
        },
      ],
      tabIndex: 0,
      swiperCurrent: 0,
    }
  },
  
  onLoad(options) {
    // 支持从外部指定默认显示的tab
    if (options.tabIndex) {
      this.tabIndex = parseInt(options.tabIndex)
      this.swiperCurrent = this.tabIndex
    }
  },
  
  methods: {
    change(index) {
      this.swiperCurrent = index
      this.tabIndex = index
      // 通知mescroll子组件进行tab切换
      this.$nextTick(() => {
        const mescrollRef = this.$refs[`mescrollItem${index}`]
        if (mescrollRef && mescrollRef[0] && mescrollRef[0].mescroll) {
          mescrollRef[0].mescroll.resetUpScroll()
        }
      })
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx)
    },
    animationfinish({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current)
      this.swiperCurrent = current
      this.tabIndex = current
      // 当swiper滑动结束时也要通知mescroll
      this.$nextTick(() => {
        if (this.$refs.mescrollItem0 && this.$refs.mescrollItem0[current]) {
          this.$refs.mescrollItem0[current].mescroll.resetUpScroll()
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>
